import { toDecimalFormate } from '@/utils/common';
import stepAnalysisNode from '@/assets/images/bpm/business/step-analysis-node.png';
export default function (G6: any, type: string) {
	/**
	 * 步骤分析节点
	 */
	G6.registerNode(
		type,
		{
			options: {
				icon: stepAnalysisNode,
				iconStyle: {
					width: 180,
					height: 160,
				},
				style: {
					//节点填充色
					fill: '#9EC9FF',
					//节点的描边颜色
					//stroke: '#5B8FF9',
					//鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持
					cursor: 'default',
				},
				stateStyles: {
					selected: {
						fill: '#9EC9FF',
					},
					hover: {
						cursor: 'move',
					},
				},
			},
			/**
			 * 绘制节点，包含文本
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 节点的容器
			 * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
			 * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
			 */
			drawShape: function drawShape(cfg: any, group: any) {
				const fill = cfg.style.fill,
					iconWidth = this.options.iconStyle.width,
					iconHeight = this.options.iconStyle.height,
					thisIcon = this.options.icon,
					textColor = '#2beded';
				// 底部填充
				const rect = group.addShape('rect', {
					attrs: {
						x: 0,
						y: 0,
						width: iconWidth,
						height: iconHeight,
						radius: 5,
						//节点的描边颜色
						//stroke,
						//填充色，有了这个填充色才能在点击节点空白的地方也能触发到事件，或者设置图形的draggable为true
						fill: fill,
						//描边宽度
						lineWidth: 0,
						//设置填充的 alpha 或透明值
						fillOpacity: 0.2,
					},
					name: 'background-color-shape',
				});
				// 添加底图
				group.addShape('image', {
					attrs: {
						x: 0,
						y: 0,
						width: iconWidth,
						height: iconHeight,
						fill: fill,
						img: thisIcon,
					},
					name: 'background-image-shape',
					draggable: true,
				});
				// 添加步骤名称
				group.addShape('text', {
					attrs: {
						text: cfg.stepName.length > 10 ? cfg.stepName.substring(0, 10) + '...' : cfg.stepName,
						x: iconWidth / 2,
						y: 20,
						fill: '#ffffff',
						fontSize: 14,
						textAlign: 'center',
						textBaseline: 'middle',
						lineHeight: 18,
					},
					name: 'text-name-shape1',
					draggable: true,
				});
				// 添加网端请求量文本
				group.addShape('text', {
					attrs: {
						text: '请求总量\n失败请求\n失败率\n告警量\n告警请求\n健康度',
						x: 80,
						y: 90,
						fill: '#ffffff',
						fontSize: 14,
						textAlign: 'right',
						textBaseline: 'middle',
						lineHeight: 18,
					},
					name: 'text-name-shape2',
					draggable: true,
				});
				// 添加网端请求量值
				group.addShape('text', {
					attrs: {
						text: cfg.reqCount + '\n\n' + cfg.failRate + '\n\n\n' + cfg.healthRate,
						x: 90,
						y: 90,
						fill: textColor,
						fontSize: 14,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
					},
					name: 'text-value-shape',
					draggable: true,
				});
				group.addShape('text', {
					attrs: {
						text: cfg.failCount + '',
						x: 90,
						y: 64,
						fill: '#ff5d84',
						fontSize: 14,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
						cursor: 'pointer',
					},
					name: 'text-value-failCount',
					draggable: true,
					capture: true,
				});
				group.addShape('text', {
					attrs: {
						text: cfg.alarmCount + '',
						x: 90,
						y: 100,
						fill: textColor,
						fontSize: 14,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
						cursor: 'pointer',
					},
					name: 'text-value-alarmCount',
					draggable: true,
					capture: true,
				});
				group.addShape('text', {
					attrs: {
						text: cfg.alarmNum + '',
						x: 90,
						y: 118,
						fill: '#ff9a0c',
						fontSize: 14,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
						cursor: 'pointer',
					},
					name: 'text-value-alarmNum',
					draggable: true,
					capture: true,
				});
				return rect;
			},
			/**
			 * 绘制后的附加操作，如隐藏左右锚点图形
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 图形分组，节点中图形对象的容器
			 */
			afterDraw(cfg: any, group: any) {},
			/**
			 * 获取锚点（相关边的连入点）
			 * @param  {Object} cfg 节点的配置项
			 * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点
			 */
			getAnchorPoints(cfg: any) {
				return [
					[0, 0.5],
					[1, 0.5],
					[0.5, 0],
					[0.5, 1],
				];
			},
			/**
			 * 更新节点，包含文本
			 * @override
			 * @param  {Object} cfg 节点的配置项
			 * @param  {item} item 节点
			 */
			update(cfg: any, item: any) {
				const group = item.getContainer();
				const children = group.get('children');
			},
			/**
			 * 响应节点的状态变化。
			 * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档
			 * @param  {String} name 状态名称
			 * @param  {Object} value 状态值
			 * @param  {Item} item 节点
			 */
			setState(name: string, value: any, item: any) {
				const group = item.getContainer();
				if (name === 'selected' || name === 'active' || name === 'hover') {
					const rect = group.getChildByIndex(0);
					if (value) {
						rect.attr('fill', this.options.stateStyles.selected.fill);
					} else {
						rect.attr('fill', '#FFFFFF00');
					}
				} else if (name === 'hover1') {
					const rect = group.getChildByIndex(0);
					const text = group.getChildByIndex(1);
					if (value) {
						rect.attr('cursor', this.options.stateStyles.hover.cursor);
						if (text) text.attr('cursor', this.options.stateStyles.hover.cursor);
					} else {
						rect.attr('cursor', this.options.style.cursor);
						if (text) text.attr('cursor', this.options.style.cursor);
					}
				}
			},
		},
		'single-node'
	);
}
